
<template>
	<view>
		<view class="List">
			<uni-forms ref="baseForm" :modelValue="baseFormData">
				<!-- avatar -->
				<uni-forms-item label="头像" required>   
					<view class="form-item-avatar"  @tap="iconTou">
						<img :src="baseHttp+baseFormData.shopImg" alt=""  style="height: 120rpx; width: 120rpx; background-size: contain;"/>
						<uni-icons type="right" size="20"></uni-icons>
					</view>
				</uni-forms-item>
				<!-- name -->
				<uni-forms-item label="名称" required>
					<uni-easyinput v-model="baseFormData.shopName" placeholder="请输入名称" />
				</uni-forms-item>
				<uni-forms-item label="行业" required>
					<navigator class="form-item-avatar" navigator url="/subpkg/jobCategory/jobCategory">
						<text>{{baseFormData.trade == ''?'请选择行业':baseFormData.trade}}</text>
						<uni-icons type="right" size="20"></uni-icons>
					</navigator>
				</uni-forms-item>
				<!-- regionName -->
				<uni-forms-item label="地区" required>
					<view class="form-item-avatar">
						<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
							<h2>{{baseFormData.address == ''?'点击选择省市区':baseFormData.address}}</h2>
						</pick-regions>
						<uni-icons type="right" size="20"></uni-icons>
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>
		<button @click="createShop" v-if="!shopId">创建</button>
		<button @click="uploadShop" v-else>修改</button>
		<qf-image-cropper v-if="showCropper" :width="500" :height="500" :radius="30" @closeHandle="closeImage" @crop="handleCrop"></qf-image-cropper>
		<!-- <uni-cropper :src="imageSrc" @success="cropperSuccess" @fail="cropperFail"></uni-cropper> -->
	</view>
</template>

<script>
	const app = getApp()
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	import Http from '@/utils/http.js'
	const http = new Http();
	export default {
		data() {
			return {
				 imageSrc: '', // 选中的图片路径
				 showCropper:false,
				baseFormData:{
					id:'',
					address:'',
					shopName:'',
					shopImg:'',
					trade:'',
					tradeId:null,
				},
				baseHttp:'',
				region:[],
				shopId:'',
				defaultRegion:['广东省','广州市','番禺区'],
				defaultRegionCode:'440113',
				imgSrc:'../../static/images/cat.jpg'
			}
		},
		mounted() {
			
		},
		onShow() {
			this.shopId = app.globalData.shopId;
			this.baseHttp = app.globalData.baseHttp; // 输出 '我是全局变量'
			if(this.shopId){
				this.getInfo();
			}
		},
		onLoad(option) {
			this.shopId = app.globalData.shopId;
			this.baseHttp = app.globalData.baseHttp; // 输出 '我是全局变量'
			if(this.shopId){
				this.getInfo();
			}
		},
		onShow() {
		  uni.$on('can', (Obj) => {
		    // 使用箭头函数可以正确访问 Vue 实例中的属性
		    this.baseFormData.tradeId = Obj.tradeId;
		    this.baseFormData.trade = Obj.title + '-' + Obj.item;
		  });
		},
		components:{ pickRegions },
		methods: {
	 handleCrop(e) {
	               
							http.upload(e.tempFilePath).then(res=>{
								let a = JSON.parse(res.data);
								this.baseFormData.shopImg = a.result.name;
								this.showCropper = false
							 });   
					
	            },
				closeImage(){
					this.showCropper = false
				},
			//获取用户数据
			getInfo(){
				http.get('v1/system/createShop/'+this.shopId).then(res=>{
					this.baseFormData.id = res.data.data.id;
					this.baseFormData.address = res.data.data.address;
					this.baseFormData.shopName = res.data.data.shopName;
					this.baseFormData.shopImg = res.data.data.shopImg;
					this.baseFormData.trade = res.data.data.trade;
				})
			},
			uploadShop(){
				http.post('v1/system/createShop/shop',this.baseFormData).then(res=>{
					if(res.data.code == 200){
						this.getInfo();
						uni.switchTab({
							url:'/pages/index/index'
						})
						uni.showToast({
							title:'修改成功',
							icon:'success'
						})
					}else{
						uni.showToast({
							title:res.data.msg,
							icon:'error'
						})
					}
				})
			},
			//接收方法
			otherFun(Obj){
				this.baseFormData.tradeId = Obj.tradeId;
				this.baseFormData.trade = Obj.title+'-'+Obj.item;
				console.log(this.baseFormData.tradeId);
				console.log(this.baseFormData.trade);
			},
			//创建店铺
			createShop(){
				http.post('v1/system/createShop',this.baseFormData).then(res=>{
					if(res.data.code == 200){
						 uni.showToast({
							title:"创建成功",
							icon:"success"    
						})
						return uni.navigateBack({delta:1});
					}else{
						return uni.showToast({
							title:res.data.msg, 
							icon:'none'
						})
					}
				})
			},
			//点击头像
			iconTou(){
				// wx.chooseImage({
				// 	count:1,
				// 	sizeType:['original','compressed'],//可以指定是压缩图  或者默认二者都有
				// 	success:res=> {
				// 		this.imgSrc = res.tempFilePaths;
						 
				// 		http.upload(res.tempFilePaths[0]).then(res=>{
				// 			let a = JSON.parse(res.data);
				// 			this.baseFormData.shopImg = a.result.name;
						 // });                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
				// 	}
				// })
				
				  // uni.chooseImage({
				  //       count: 1, // 最多选择一张图片
				  //       sizeType: ['original', 'compressed'], // 压缩图片
				  //       sourceType: ['album', 'camera'], // 从相册或相机选择
				  //       success: (res) => {
				  //         this.imageSrc = res.tempFilePaths[0]; // 设置选中的图片路径
				  //       }
				  //     });
				  
				  this.showCropper = true
			},
		    change(e) {
		      console.log('当前模式：' + e.type + ',状态：' + e.show);
		    },
		    toggle(type) {
		      this.type = type;
		      // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
		      this.$refs.popup.open(type);
		    },
		     // 获取选择的地区
			handleGetRegion(region){
				this.region = region
				console.log(this.region);
			}
		},
		computed:{
			regionName(){
				// 转为字符串
				this.baseFormData.address = this.region.map(item=>item.name).join(' ')
			}
		},
	}
</script>

<style scoped lang="scss">
	.List{
		width: 90%;
		box-sizing: border-box;
		background-color: white;
		border-radius: 20rpx;
		margin: 10rpx auto;
		padding: 10rpx;
	    .form-item-avatar {
			 justify-content: flex-end;
			 display: flex;
			 align-items: center; 
		}
		.createTemplate{
			width: 100%;
			height: 400rpx;
			background-color: white;
		}
	}
	button{
		position: absolute;
		bottom: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		bottom: 20rpx;
		left: 30rpx;
		right: 30rpx;
		background: #00008B;
		color: #fff;
		text-align: center;
		border-radius: 40rpx;
	}
</style>